<template>
  <div class="jsc">
    <div class="logo">
      <div class="logo-title"></div>
      <div class="logo-select">
        <span @click="doHome" style="margin-right: 36px; font-size: 36px; float: left">
          <a class="logout_title">
            <a-icon type="appstore" style="color: #345acb"></a-icon>
          </a>
        </span>
        <div class="cj">
          车间：<a-select defaultValue="">
            <a-select-option value="">一车间</a-select-option>
            <a-select-option value="2">二车间</a-select-option>
          </a-select>
        </div>
        <div class="gq">
          工区：
          <a-select defaultValue="" @change="gqChange">
            <a-select-option value="">一工区</a-select-option>
            <a-select-option value="2">二工区</a-select-option>
          </a-select>
        </div>
      </div>
    </div>
    <div class="line-1"></div>
    <div class="content">
      <div class="content-title-1"></div>
      <a-row>
        <a-col :span="2" v-for="obj in list" :key="obj">
          <div class="card-jsc">
            <div style="height: 60px">
              <template v-if="redIndex.indexOf(obj) > -1">
                <img src="~@/assets/siteMonitoring/tb-2.png" alt="logo" style="margin-top: 10px" />
              </template>
              <template v-else-if="yellowIndex.indexOf(obj) > -1">
                <img src="~@/assets/siteMonitoring/tb-4.png" alt="logo" style="margin-top: 10px" />
              </template>
              <template v-else-if="cyanIndex.indexOf(obj) > -1">
                <img src="~@/assets/siteMonitoring/tb-5.png" alt="logo" style="margin-top: 10px" />
              </template>
              <template v-else-if="orangeIndex.indexOf(obj) > -1">
                <img src="~@/assets/siteMonitoring/tb-6.png" alt="logo" style="margin-top: 10px" />
              </template>
              <template v-else>
                <img src="~@/assets/siteMonitoring/tb-1.png" alt="logo" style="margin-top: 10px" />
              </template>
            </div>
            <div style="color: #fff; font-size: 6px">
              <span style="">冷</span><span style="margin-left: 14px">出铝</span
              ><span style="margin-left: 14px">自动</span>
            </div>
            <div style="color: #03d9d2; font-size: 5px">
              <span>5043</span><span style="margin-left: 10px">4043</span><span style="margin-left: 10px">3033</span>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <div class="line-2"></div>
    <div class="content">
      <div class="content-title-2"></div>
      <a-row>
        <a-col :span="2" v-for="obj in list" :key="obj">
          <div class="card-jsc">
            <div style="height: 60px">
              <template v-if="redIndex.indexOf(obj) > -1">
                <img src="~@/assets/siteMonitoring/tb-2.png" alt="logo" style="margin-top: 10px" />
              </template>
              <template v-else-if="yellowIndex.indexOf(obj) > -1">
                <img src="~@/assets/siteMonitoring/tb-4.png" alt="logo" style="margin-top: 10px" />
              </template>
              <template v-else-if="cyanIndex.indexOf(obj) > -1">
                <img src="~@/assets/siteMonitoring/tb-5.png" alt="logo" style="margin-top: 10px" />
              </template>
              <template v-else-if="orangeIndex.indexOf(obj) > -1">
                <img src="~@/assets/siteMonitoring/tb-6.png" alt="logo" style="margin-top: 10px" />
              </template>
              <template v-else>
                <img src="~@/assets/siteMonitoring/tb-1.png" alt="logo" style="margin-top: 10px" />
              </template>
            </div>
            <div style="color: #fff; font-size: 6px">
              <span style="">冷</span><span style="margin-left: 14px">出铝</span
              ><span style="margin-left: 14px">自动</span>
            </div>
            <div style="color: #03d9d2; font-size: 5px">
              <span>5043</span><span style="margin-left: 10px">4043</span><span style="margin-left: 10px">3033</span>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      list: [],
      redIndex: [3, 7, 33, 57],
      yellowIndex: [5, 9, 10, 43],
      cyanIndex: [12, 18],
      orangeIndex: [11, 46],
    }
  },
  mounted() {
    this.list = []
    for (let i = 0; i < 60; i++) {
      this.list.push(i)
    }
  },
  methods: {
    doHome() {
      this.$router.push({ path: '/home/index' })
    },
    gqChange(val) {
      if (val == 2) {
        this.redIndex = [30, 17, 23, 27]
        this.yellowIndex = [5, 8, 14, 4]
        this.cyanIndex = [2, 6]
        this.orangeIndex = [1, 16]
      } else {
        this.redIndex = [3, 7, 33, 57]
        this.yellowIndex = [5, 9, 10, 43]
        this.cyanIndex = [12, 18]
        this.orangeIndex = [11, 46]
      }
    },
  },
}
</script>

<style scoped lang="less">
.jsc {
  width: 100%;
  // min-height: 1024px;
  background: #f0f2f5 url(~@/assets/siteMonitoring/bg.png) no-repeat center center;
  background-size: 100% 100%;
  padding: 1% 0 6.66%;
  position: relative;
}
.line-1 {
  border-top: 1px solid #345acb;
}
.line-2 {
  border-top: 1px solid #172d8b;
  margin-top: 30px;
}
.jsc > .logo {
  width: 100%;
  margin: 0 auto;
  height: 5%;
  padding: 1% 7%;
}

.logo-title {
  background: url(~@/assets/siteMonitoring/logo-1.png) no-repeat left top;
  background-size: contain;
  padding: 0px;
  width: 100%;
  height: 100%;
  min-height: 80px;
}
.logo-select {
  width: 350px;
  margin-right: 100px;
  float: right;
  color: #dfe6f9;
  line-height: 36px;
  position: absolute;
  top: 70px;
  right: 3%;
}
.logo-select .cj {
  float: left;
}
.logo-select .gq {
  float: right;
}
.logo-select .input {
  width: 100px;
  height: 26px;
  border: 1px solid #dfe6f9;
  float: right;
  margin-left: 5px;
  margin-top: 5px;
}
.jsc > .content {
  width: 100%;
  margin-top: 35px;
  padding: 1% 7%;
  border: 0px;
  text-align: center;
}
.content-title-1 {
  width: 43px;
  height: 98px;
  border: 0px;
  background: url(~@/assets/siteMonitoring/1.png) no-repeat left top;
  position: absolute;
  top: 30%;
  left: 34px;
}
.content-title-2 {
  width: 43px;
  height: 98px;
  border: 0px;
  background: url(~@/assets/siteMonitoring/2.png) no-repeat left top;
  position: absolute;
  top: 70%;
  left: 34px;
}
.card-jsc {
  background: url(~@/assets/siteMonitoring/tb_bbg.png) no-repeat left top;
  background-color: rgba(28, 47, 155, 0.2);
  border-radius: 6px;
  background-size: 100% 100%;
  width: 100px;
  height: 107px;
  width: 100px;
  height: 107px;
  border: 0px;
  margin: 6px;
  cursor: pointer;
}
.card-jsc .ant-card-body {
  padding-top: 0px !important;
}
.card-jsc:hover {
  border: 1px solid #345acb;
}
</style>